<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="renderer" content="webkit"/>
	<meta name="force-rendering" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>首页</title>
    <link rel="stylesheet" href="libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style/common.css">
    <script src="libs/vue.js"></script>
    <script src="libs/jquery-3.2.1.min.js"></script>
	<script src="jsc/axios.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script> -->
    <script src="libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/layer-v3.1.1/layer/layer.js"></script>

	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app" v-cloak>
    <header-component url="./"></header-component>
    <nav-component></nav-component>

    <homebanner-component></homebanner-component>

    <main>
        <div class="content">
            <site-component :id="id" url="./"></site-component>

            <div class="adv-row">
                <a :href="a.url" target="view_window" v-for="(a,index) in adv1" :key="index"><img :src="a.image_text" alt=""></a>
            </div>
            <div class="Exhibition-container">
                <div class="Exhibition-l">
                    <classify-component></classify-component>
                    <knowledge-component></knowledge-component>
                    <legalsystem-component></legalsystem-component>
                    <report-component></report-component>
                </div>
                <div class="Exhibition-r">
                    <notice-component></notice-component>
                    <survey-component></survey-component>
                    <news-component></news-component>
                    <publicinterest-component></publicinterest-component>
                </div>
            </div>
            <div class="adv-row">
                <a :href="a.url" target="view_window" v-for="(a,index) in adv2" :key="index">
                    <img :src="a.image_text" alt="" style="height: 5.75rem">
                </a>
            </div>
            <div class="adv-row">
                <a :href="a.url" target="view_window" v-for="(a,index) in adv3" :key="index">
                    <img :src=" a.image_text" alt="" style="width: 100%">
                </a>
            </div>
            <friend-component></friend-component>
        </div>
    </main>
    <suspension-component></suspension-component>
    <footer-component url="./"></footer-component>
    <modal-component></modal-component>
</div>

<script src="jsc/common.js"></script>
<script src="jsc/component.js"></script>
<script>
    window.localStorage.removeItem("station");

    $(window).resize(function(){
        var width_window = $(window).width();
        var width_div    = $(".content").width();
        var left         = (width_window - width_div) / 2 + width_div + 30;
        $(".suspension").css({ "left" : left });
    });

    //获取窗口可视范围的高度
    function getClientHeight(){
        var clientHeight = 0;
        if( document.body.clientHeight && document.documentElement.clientHeight ){
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }else{
            var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }
        return clientHeight;
    }

    function getScrollTop(){
        var scrollTop = 0;
        if( document.documentElement && document.documentElement.scrollTop ){
            scrollTop = document.documentElement.scrollTop;
        }else if( document.body ){
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    function getScrollHeight(){
        return Math.max(document.body.scrollHeight , document.documentElement.scrollHeight);
    }

    $(window).scroll(function(){
        var height  = getClientHeight() ,
            // 窗口滚动条高度
            theight = getScrollTop() ,
            // 窗口可视范围的高度
            rheight = getScrollHeight() ,
            // 滚动条距离底部的高度
            bheight = rheight - theight - height;
        if( document.documentElement.scrollTop >= 200 && bheight > 400 ){
            $(".suspension").show();
        }else{
            $(".suspension").hide();
        }
    });
    var userAgent = navigator.userAgent.toLowerCase();
    var platform;
    if( userAgent == null || userAgent == '' ){
        platform = 'WEB';
    }else{
        if( userAgent.indexOf("android") != -1 ){
            platform      = 'ANDROID';
            location.href = "views/wap/index.html";
        }else if( userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1 ){
            platform      = 'IOS';
            location.href = "views/wap/index.html";
        }else if( userAgent.indexOf("windows phone") != -1 ){
            platform      = 'WP';
            location.href = "views/wap/index.html";
        }else{
            platform = 'WEB';
            //            location.href = "#";
        }
    }
</script>
<script>
    var vm = new Vue({
        el      : "#app" ,
        data    : {
            site:{},
            id:{province_id:1},
            bannberIDList : [ 15 , 41 , 42 ] ,            // 要获取的banner id
            myTabIDList   : [ 25 , 30 , 36 ] ,                 // 文章分类列表

            site_id : 0 ,                              // 站点id
            siteTop:"",                             // 全部顶级站点

            detail   : {} ,
            url      : weburl ,
            adv1     : [] ,
            adv2     : [] ,
            adv3     : [] ,

            myTabList1   : [] ,         // 家园见闻 tab list
            myTabList2   : [] ,         // 法制道德 tab list
            myTabList3   : [] ,         // 公益帮助 tab list

            articleList1 : [] ,         // 家园见闻 文章列表 数据
            articleList2 : [] ,         // 法制道德 文章列表 数据
            articleList3 : [] ,         // 公益帮助 文章列表 数据

            surveyList : "" ,           // 家园调查4条数据
        } ,
        mounted(){
            var _th = this;
            this.getBanner();       // 获取banner
            //this.getTopSite();
            this.getSpecial();
        } ,
        filters : {} ,
        methods : {
            loginOut : function(){
                //退出登录
                layer.confirm("确定退出登录？" , { btn : [ "确定" , "取消" ] } , function(){
                    delCookie("token");
                    window.location.href = "login.html";
                } , function( index ){
                    layer.close(index);
                });
            } ,
            // 获取专题栏目数据 site_id
            getSpecial(){
                axios.post(sysurl + 'index/special' , {}).then(res => {
                    var data = res.data;
                    if( data.code === 1 ){
                        // console.log(data);
                    }else{
                        // layer.msg(res.data.msg);
                    }
                } , err => {}).catch(( error ) => {});
            },
            // 获取banner
            getBanner(){
                this.bannberIDList.map(( item , index ) => {
                    axios.post(sysurl + 'index/bannerAds' , { category_id : item }).then(res => {
                        var data = res.data;
                        if( data.code === 1 ){
                            switch( item ){
                                case 14:            // 首页顶部banner
                                    this.carousel = data.data;
                                    break;
                                case 15:            // 首页中部广告
                                    this.adv1 = data.data;
                                    break;
                                case 41:            // 首页底部1x3广告;
                                    this.adv2 = data.data;
                                    break;
                                case 42:            // 首页底部1x1广告
                                    this.adv3 = data.data;
                                    break;
                            }
                        }else{
                            layer.msg(res.data.msg);
                        }
                    } , err => {}).catch(( error ) => {});
                });
            } ,
        }
    });
</script>
</body>
</html>
